<!-- 培养体系 -->
<template>
  <div class="Overview">
    <div class="layout">
      <div class="head">
        <h1>Overview</h1>
        <span>培养体系</span>

      </div>
      <ul class="list">
        <li v-for="(item,idx) in content" :key="idx" :style="{ 'background-image': 'url(' + item.bg + ')' }" :class="active==idx?'active':null" @click="getDetail(idx)">
          <!-- <img src="./img/pytx.png" alt="" draggable="false"> -->
          <div class="info">
            <h3>{{ item.title1 }}</h3>
            <p>
              {{ item.title2 }}
            </p>
            <p>{{ item.title3 }}</p>
          </div>
        </li>

      </ul>
      <div class="cont">
        <div class="subtitle">详情</div>
        <div class="stage">
          <p>
            <!-- <label>{}</label> -->
            {{ content[active].title1 }}
          </p>
          <p>
            <!-- <label>{}</label> -->
            {{ content[active].title2 }}
          </p>
          <p>
            <!-- <label>{}</label> -->
            {{ content[active].title3 }}
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
import { toRefs, getCurrentInstance, reactive } from "vue";
import { useRouter } from "vue-router";
export default {
  name: "Overview",
  components: {},
  setup() {
    const { proxy } = getCurrentInstance();
    const router = useRouter();
    let dataObj = reactive({
      dataList: [],
      active: 0,
      detailData: [],
      navToRight: require("./img/nav-to-right.png"),
      activeNavToRight: require("./img/active-nav-to-right.png"),
      imageUrl: require("./img/information-banner.png"),
      content: [
        {
          title1: "交叉型",
          title2: "学科教学体系",
          title3: "艺术、管理、科技、传媒等专业相融合",
          bg: require("./img/overview/overview-1.jpg")
        },
        {
          title1: "复合型",
          title2: "语言培养体系",
          title3: "英语为主，其余语种为辅",
          bg: require("./img/overview/overview-2.jpg")
        },
        {
          title1: "一体化",
          title2: "项目生态体系",
          title3:
            "专业课教学 + 英语教学 + 雅思培训 + 艺术作品集培训 + 留学申请 + 签证服务",
          bg: require("./img/overview/overview-3.jpg")
        },
        {
          title1: "全天候",
          title2: "学生管理体系",
          title3: "24 小时全天制管理、一周六天制教学",
          bg: require("./img/overview/overview-4.jpg")
        }
      ]
    });

    let getDetail = (idx) => {
      dataObj.active = idx;
    };

    return {
      ...toRefs(dataObj),
      getDetail
    };
  }
};
</script>
    <style scoped lang="scss">
@font-face {
  font-family: "font-one";
  src: url("../../../assets/Morganite-Black-2.ttf");
}
.Overview {
  width: 100%;
  background: no-repeat left top;
  background-size: 100% 364px;
  padding-bottom: 180px;
  .layout {
    width: 1200px;
    margin: 0 auto;
    .head {
      width: 100%;
      display: flex;
      margin-top: 132px;
      height: 225px;
      align-items: center;
      h1 {
        font-family: "font-one";
        font-weight: 900;
        font-size: 225px;
        color: #ff6b19;
        line-height: 225px;
        text-align: right;
        font-style: normal;
      }
      span {
        font-family: HarmonyOS_Sans_SC_Black;
        font-size: 40px;
        color: #2a2a2a;
        line-height: 56px;
        text-align: left;
        font-style: normal;
        margin-left: 20px;
        margin-top: 50px;
      }
    }
    .list {
      width: 100%;
      height: 280px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      li {
        overflow: hidden;
        flex: 1;
        background: linear-gradient(269deg, #edf2f6 0%, #ecf1f4 100%);
        box-shadow: 0px 2px 40px 0px rgba(42, 42, 42, 0.14);
        position: relative;
        cursor: pointer;
        background-position: center center;
        // img {
        //   width: 100%;
        //   height: 100%;
        //   display: block;
        //   transition: transform 0.3s ease; /* 平滑的变换效果 */
        //   transform: scale(1);
        // }
        .info {
          width: 100%;
          position: absolute;
          bottom: 0;
          left: 0;
          background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.4) 0%,
            #ffffff 100%
          );
          box-shadow: 0px 2px 40px 0px rgba(42, 42, 42, 0.14);
          padding: 14px 20px;
          height: 150px;
          h3 {
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 18px;
            color: #2a2a2a;
            line-height: 25px;
            text-shadow: 0px 2px 40px rgba(42, 42, 42, 0.14);
            text-align: left;
            font-style: normal;
            margin-bottom: 8px;
          }
          p {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #2a2a2a;
            line-height: 20px;
            text-shadow: 0px 2px 40px rgba(42, 42, 42, 0.14);
            text-align: left;
            font-style: normal;
          }
        }
      }
      li.active {
        .info {
          background: linear-gradient(
            180deg,
            rgba(255, 107, 25, 0.3) 0%,
            #ff6b19 100%
          );
          h3 {
            color: #fff;
          }
          p {
            color: #fff;
          }
        }
      }
      li:hover {
        > img {
          transform: scale(1.1); /* 鼠标划过时放大1.1倍 */
        }
        .info {
          background: linear-gradient(
            180deg,
            rgba(255, 107, 25, 0.3) 0%,
            #ff6b19 100%
          );
          h3 {
            color: #fff;
          }
          p {
            color: #fff;
          }
        }
      }
      li:not(:last-child) {
        margin-right: 30px;
      }
    }
    .cont {
      width: 100%;
      margin-top: 80px;
      .subtitle {
        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 28px;
        color: #2a2a2a;
        line-height: 40px;
        text-align: left;
        font-style: normal;
        position: relative;
      }
      .subtitle:before {
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 112px;
        height: 12px;
        background: linear-gradient(
          270deg,
          rgba(255, 107, 25, 0) 0%,
          #ff6b19 100%
        );
      }
      .stage {
        margin-top: 20px;
        p {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
          line-height: 32px;
          text-align: justify;
          font-style: normal;
        }
      }
    }
  }
}
</style>
    